{% extends 'IcsocUIBundle::page.html.twig' %}

{% block stylesheet %}
    {{ parent() }}
    {% stylesheets
    '@jqgird_css'
    filter='cssrewrite' filter='uglifycss'
    %}
    <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}
{% endblock %}

{% block content %}
    <table id="grid-table"></table>
    <div id="grid-pager"></div>
{% endblock %}

{% block javascript %}
    {{ parent() }}
    {% javascripts
    '@jqgird_js'
    filter='uglifyjs'
    %}
    <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    <script type="application/javascript">
        $(document).ready(function() {
            jQuery(function ($) {
                var grid_selector = "#grid-table";
                var pager_selector = "#grid-pager";
                //resize to fit page size
                $(window).on('resize.jqGrid', function () {
                    $(grid_selector).jqGrid('setGridWidth', $("#main-container").width());
                    jQuery(grid_selector).jqGrid('setGridHeight', $(document).height() - 150);
                });
                //resize on sidebar collapse/expand
                var parent_column = $(grid_selector).closest('[class*="col-"]');
                $(document).on('settings.ace.jqGrid', function (ev, event_name, collapsed) {
                    if (event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed') {
                        $(grid_selector).jqGrid('setGridWidth', parent_column.width());
                        $(grid_selector).jqGrid('setGridHeight', $(document).height() - 150);
                    }
                });
                jQuery(grid_selector).jqGrid({
                    caption: "{{ caption|trans({'%start_date%': start_date, '%end_date%': end_date}) }}",
                    url: "{{ path('icsoc_custom_report_generate_data') }}",  //数据；
                    postData: {param: '{{ param }}'},
                    mtype: 'POST',
                    datatype: "json", //从服务器端返回的数据类型，默认xml：xml，local，json，jsonnp，script，xmlstring，jsonstring，clientside
                    colModel: [
                        {% for item, itemTitle in title %}
                        {% if item == 'agent' or item == 'queue' or item == 'date' or item == 'group' %}
                            {name: '{{ item }}', index: '{{ item }}', label: '{{ itemTitle|trans }}', frozen: true, width: 120,fixed:true, align: 'center', sortable: false},
                        {% else %}
                            {name: '{{ item }}', index: '{{ item }}', label: '{{ itemTitle|trans }}', width: 120,fixed:true, align: 'center', sortable: false},
                        {% endif %}
                        {% endfor %}
                    ],
                    shrinkToFit:true,
                    rownumbers: true,
                    rownumWidth: 40,
                    viewrecords: true, //定义是否要显示总记录数
                    rowNum: 20,  //默认每页显示多少条数据
                    rowList: [20,30,50,100],
                    pager: pager_selector, //翻页工具对象
                    pgbuttons: true,
                    pginput: true,
                    altRows: true,  //表格间隔底色
                    multiselect: false,  //是否可以多选
                    treeGrid: true,
                    loadComplete: function() {
                        var table = this;
                        setTimeout(function(){
                            updatePagerIcons(table);
                        }, 0);
                    }
                });
                $(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size
                //navButtons prmEdit, prmAdd, prmDel, prmSearch, prmView
                jQuery(grid_selector).jqGrid('navGrid', pager_selector,
                    { 	//navbar options
                        edit: false,
                        add: false,
                        del: false,
                        delicon: 'ace-icon fa fa-trash-o red',
                        search: false,
                        refresh: true,
                        refreshicon: 'ace-icon fa fa-refresh green',
                        view: false,
                        viewicon: 'ace-icon fa fa-search-plus grey'
                    },
                    {},
                    {},
                    {},
                    {},
                    {}
                ).navButtonAdd(
                    pager_selector,
                    {
                        caption:'{{ 'Export Csv'|trans }}',
                        buttonicon:'ace-icon fa fa-file-excel-o  primary',
                        onClickButton:function() {
                            location.href = "{{ path('icsoc_custom_report_generate_data', {'export': 'csv', 'param': param, 'title': title|json_encode})|raw }}";
                        }
                    }
                ).navButtonAdd(
                    pager_selector,
                    {
                        caption:'{{ 'Export Excel'|trans }}',
                        buttonicon:'ace-icon fa fa-file-excel-o  primary',
                        onClickButton:function() {
                            location.href='{{ path('icsoc_custom_report_generate_data', {'export': 'excel', 'param': param, 'title': title|json_encode})|raw }}';
                        }
                    }
                ).navButtonAdd(
                    pager_selector,
                    {
                        buttonicon:'ace-icon fa fa-reply primary',
                        caption:'{{ 'return'|trans }}',
                        onClickButton:function() {
                            location.href='{{ path('icsoc_custom_report_home') }}';
                        }
                    }
                );
            });

            function updatePagerIcons(table) {
                var replacement =
                {
                    'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140',
                    'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140',
                    'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140',
                    'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140'
                };
                $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
                    var icon = $(this);
                    var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
                    if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
                })
            }
        });
    </script>
{% endblock %}